<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div id="login">
  <div class="loginBody"  :style="loginBg">
    <div class="loginForm" v-if="loginShow">
      <div class="loginTitle">
        华康后台管理系统
      </div>
      <div class="loginDiv">
        <el-row class="login">
          <div class="grid-content bg-purple"> &nbsp; </div>
          <div class="grid-content bg-purple-light">
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item label="用户名" prop="acct" class="inputLable firstLine">
                <el-input v-model="form.acct" placeholder="请输入用户名" required="required" class="inputStyle"></el-input>
              </el-form-item>

              <el-form-item label="密码" prop="password" class="inputLable">
                <el-input v-model="form.password" placeholder="请输入密码" type="password" class="inputStyle"></el-input>
              </el-form-item>

              <el-form-item label="验证码" prop="captcha">
                <el-input v-model="form.captcha" placeholder="请输入验证码" width="50%" class="inputShortStyle"></el-input>
                <img id="captchaImgUrl" class="captchaImg" v-bind:src="form.captchaImg" @click="loadCaptacha"/>
              </el-form-item>
              <div class="checkBoxDiv">
                <el-checkbox type="primary" v-model="checked" class="checkBox">记住我</el-checkbox>
                <span @click="forgetPassShow" class="forgetPass">忘记密码</span>
              </div>
              <el-form-item>
                <el-button  @click="auth" class="loginButton">登录</el-button>
              </el-form-item>
              <el-form-item>
                <el-alert
                  v-bind:title="msg"
                  v-bind:type="isAlert ? 'error' : 'success'"
                  v-if="show">
                </el-alert>
              </el-form-item>
            </el-form>
          </div>
          <div class="grid-content bg-purple"> &nbsp; </div>
        </el-row>
      </div>
    </div>
    <ForgetPassword v-if="forgetPasswordShow" @loginShow="loginShowMethod"></ForgetPassword>
  </div>
  </div>
</template>

<script>
  import ForgetPassword from './ForgetPassword.vue'
  import md5 from 'blueimp-md5'
  import uuid from 'uuid-js'
  export default {
    components: {
      ForgetPassword
    },
    data () {
      return {
        msg: '',
        show: false,
        isAlert: false,
        isValidated: false,
        isDebug: true,
        loginShow: true,
        forgetPasswordShow: false,
        checked:true,// '记住我'
        loginBg: "background:url(" + require('../../assets/images/login_back.jpg') + ") no-repeat;background-size: cover;",
        form: {
          sessionId: uuid.create().toString(),
          acct: '',
          password: '',
          captcha: '',
          captchaImg: ''
        },
        rules: {
          acct: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, max: 11, message: '长度为11个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ],
          captcha: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            {min: 4, max: 4, message: '长度为4个字符', trigger: 'blur'},
          ]
        }
      }
    },
    created: function () {
      this.loadCaptacha();
      this.form.acct = localStorage.getItem("USER_NAME");
    },
    methods: {
      loginShowMethod(){
        this.forgetPasswordShow = false;
        this.loginShow = true;
      },
      forgetPassShow(){
        this.forgetPasswordShow = true;
        this.loginShow = false;
      },
      showMsg: function (msg, isAlert) {
        this.msg = msg;
        this.show = true;

        if (this.isDebug) {
        }
        if (isAlert) {
          this.isAlert = true;
        } else {
          this.isAlert = false;
        }
        setTimeout(function () {
          this.show = false;
        }.bind(this), 3000);
      },
      loadCaptacha () {
        var captachaUrl = '/api-web/v1/api/captcha/' + this.form.sessionId;
        this.$http.get(captachaUrl).then(
          response => {
            var data = response.body;
            if (this.isDebug) {
              // console.log(JSON.stringify(data));
            }
            this.form.captchaImg = data.result;
          });
      },
      auth () {
        this.validateForm();
        if (!this.isValidated) {
          return;
        }
        if(this.checked){
          if(this.form.acct !== null){
            localStorage.setItem("USER_NAME", this.form.acct);
          }
        }else{
          localStorage.removeItem("USER_NAME");
        }
        var json = JSON.parse('{ "loginType": "2", "pwd": "", "verifySource": "", "verifyCode": "" }');
        json.pwd = md5(this.form.password);
        json.verifySource = this.form.sessionId;
        json.verifyCode = this.form.captcha;
        var authUrl = '/api-web/v1/api/auth/user/' + this.form.acct;
        this.$http.post(authUrl, json).then(
          response => {
            var data = response.body;
            if (data.resultCode !== '200') {
              this.showMsg(data.result, true);
              this.loadCaptacha();
              return;
            }
            if (data.result === null || data.result.length === 0) {
              this.showMsg('登录失败', true);
              this.loadCaptacha();
              return;
            }
            this.showMsg('登录: ' + data.msg + '!');
            if (this.isDebug) {
              let {realName, id, name} = data.result;
              sessionStorage.setItem('USER_NAME', name);
              sessionStorage.setItem('realName', realName);
              sessionStorage.setItem('HKid', id);
            }
            this.$router.push({name:'hello'});
          });
      },
      validateForm () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.isValidated = true;
          } else {
            this.isValidated = false;
          }
        });
      },
      resetForm () {
        this.$refs['form'].resetFields();
      }
    }
  }
</script>
<style  lang="less">
  #login{
     .loginForm {
        margin: 0 auto;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -267px;
        margin-top: -237px;
      }

      .loginDiv {
        width: 534px;
        height: 410px;
        background-color: RGBA(34, 34, 34, 0.3);
        border: 2px;
        border-color: #000000;
        border-radius: 12px;
        padding-top: 30px;
        padding-bottom: 40px;

      }

      .loginBody {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        /*background: url("../../assets/images/login_back.jpg") no-repeat;*/
        /*background-size: cover;*/
      }

      .loginTitle {
        font-size: 30px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        margin-bottom: 30px;
      }

      inputLable {
        width: 100px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
      }

      .inputStyle {
        width: 302px;
        height: 38px;
        border: 1px;
        border-color: #ffffff;
        border-radius: 3px;
        margin-left: 20px;
      }

      .inputShortStyle {
        width: 182px;
        height: 38px;
        border: 1px;
        border-color: #ffffff;
        border-radius: 3px;
        margin-left: 20px;
      }

      .loginButton {
        font-size: 16px;
        color: #ffffff;
        margin: 0px;
        text-align: center;
        margin-left: 150px;
        width: 302px;
        background-color: #f7931e;
        &:hover{
          background-color: #db7c1d;
        }
      }

      .captchaImg {
        width: 90px;
        height: 34px;
        margin-left: 20px;
      }

      .checkBox {
        width: 20px;
        height: 20px;
        font-size: 14px;
        color: #ffffff;
        text-align: left;
        margin-left: 0px;
        padding: 0px;
      }

      .checkBoxDiv {
        margin-top: 10px;
        padding-bottom: 20px;
        padding-left: 150px;
        text-align: left;
      }

      .forgetPass {
        width: 100px;
        margin-left: 220px;
        cursor: pointer;
        color:rgb(247, 147,30);
      }
      .loginBody .el-form-item__label{
        color: #ffffff;
        &:before{
          display:none
        }
      }

      .loginBody .el-form-item__content{
        margin: 0;
        padding: 0;
        text-align: left;
      }

      .loginBody .el-form-item__label{
        margin: 0;
        padding: 0;
        text-align: right;
        width: 130px;
        line-height: 38px;
      }

      .loginBody .el-form-item{
        margin: 0;
        padding: 0;
        height: 66px;
      }

      .loginBody .el-form-item__inner{
        margin: 0;
        padding: 0;
      }

      .loginBody .el-form-item__error{
        margin: 0;
        padding: 0;
        font-size: 12px;
        color: #ff0000;
        margin-left: 150px;
        line-height: 28px;
        position: relative;
      }
  }
 

</style>
